<template>
	<view class="pageView">
		<u-navbar
			title="订单详情"
			:autoBack="true"
			bgColor="#0165FB"
			titleStyle="color: #fff"
			leftIconColor="#fff"
		>
		</u-navbar>
		<view class="pageHead">
			<view class="stepBlock">
				<view class="stepBlock-bg"></view>
			</view>
			<view class="stepBlockFont">
				<view v-for="(item, index) in stepList">{{ item }}</view>
			</view>
			<image :src="imgUrl + 'images/orderStatus.png'" class="pageHead-img"></image>
		</view>
		<view class="detailBlockTop">
			<image :src="imgUrl + 'images/detailImg.png'" class="detailBlockTop-img"></image>
			<view>
				<view class="detailBlockTop-title">2小时陪诊</view>
				<view class="detailBlockTop-price">
					<text class="detailBlockTop-price-unit">¥</text>
					<text class="detailBlockTop-price-num">128.00</text>
					<text class="detailBlockTop-price-font">元/次</text>
				</view>
			</view>
		</view>
		<view class="serviceInformationBlock">
			<view class="serviceInformationBlock-block">
				<view class="serviceInformationBlock-block-title">服务信息</view>
				<view style="width: 100%;height: 32rpx;"></view>
				<view class="serviceInformationBlock-block-valueBlock">
					<view class="serviceInformationBlock-block-valueBlock-title">期望陪诊时间</view>
					<view class="serviceInformationBlock-block-valueBlock-value">2024-09-02 9:30-11:30</view>
				</view>
				<u-divider></u-divider>
				<view class="serviceInformationBlock-block-valueBlock">
					<view class="serviceInformationBlock-block-valueBlock-title">是否接送</view>
					<view class="serviceInformationBlock-block-valueBlock-value">包接送</view>
				</view>
				<u-divider></u-divider>
				<view class="serviceInformationBlock-block-valueBlock">
					<view class="serviceInformationBlock-block-valueBlock-title">是否接送</view>
					<view class="serviceInformationBlock-block-valueBlock-value">包接送</view>
				</view>
				<u-divider></u-divider>
				<view class="serviceInformationBlock-block-valueBlock">
					<view class="serviceInformationBlock-block-valueBlock-title">科室</view>
					<view class="serviceInformationBlock-block-valueBlock-value">神经内科</view>
				</view>
				<u-divider></u-divider>
				<view class="serviceInformationBlock-block-valueBlock">
					<view class="serviceInformationBlock-block-valueBlock-title">陪诊师性别</view>
					<view class="serviceInformationBlock-block-valueBlock-value">不限</view>
				</view>
			</view>
		</view>
		<view class="peopleBlock">
			<view class="peopleBlock-block">
				<view class="peopleBlock-block-title">就诊人</view>
				<view class="peopleBlock-block-username">牛先生</view>
				<view class="peopleBlock-block-peopleInformation">
					<view class="peopleBlock-block-peopleInformation-onece">男</view>
					<view class="peopleBlock-block-peopleInformation-twice">30岁</view>
					<view class="peopleBlock-block-peopleInformation-third">18002950394</view>
				</view>
			</view>
		</view>
		<view class="specialNeedsBlock">
			<view class="specialNeedsBlock-block">
				<view class="specialNeedsBlock-block-title">特殊需求</view>
				<view class="specialNeedsBlock-block-content">无自行上下楼梯能力等...</view>
				<view class="specialNeedsBlock-block-img"></view>
			</view>
		</view>
		<view class="orderingInformationBlock">
			<view class="orderingInformationBlock-block">
				<view class="orderingInformationBlock-block-title">订单信息</view>
				<view style="width: 100%;height: 32rpx;"></view>
				<view class="orderingInformationBlock-block-valueBlock">
					<view class="orderingInformationBlock-block-valueBlock-title">订单编号</view>
					<view class="orderingInformationBlock-block-valueBlock-value">ABCD1234567890123456</view>
				</view>
				<u-divider></u-divider>
				<view class="orderingInformationBlock-block-valueBlock">
					<view class="orderingInformationBlock-block-valueBlock-title">下单时间</view>
					<view class="orderingInformationBlock-block-valueBlock-value">2024-09-11 06:53:33</view>
				</view>
			</view>
		</view>
		<view class="btnBlock">
			<button class="btnBlock-left" @click="handleClickBtn">补差价</button>
			<button class="btnBlock-right">完成</button>
		</view>
		<u-popup closeable :show="popupShow" mode="bottom" :round="10" @close="handlePopupClose">
			<view class="popupBlock">
				<view class="popupBlock-title">补差价</view>
				<view class="popupBlock-valueBlock">
					<view class="popupBlock-valueBlock-title">补差价金额</view>
					<view>
						<text class="popupBlock-valueBlock-valuenum">0</text>
						<text class="popupBlock-valueBlock-unit">元</text>
					</view>
				</view>
				<button class="popupBlock-btn" @click="handlePopupClose">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false,
				imgUrl: this.$ImgUrl,
				stepList: ['填写订单', '在线支付', '专人服务', '服务完成']
			}
		},
		methods: {
			handleClickBtn() {
				this.popupShow = true
			},
			handlePopupClose() {
				this.popupShow = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 140vh;
		background: #F4F4F4;
		.pageHead{
			width: 100%;
			height: 542rpx;
			background: #0165FB;
			position: relative;
			.stepBlock{
				position: absolute;
				width: 678rpx;
				height: 20rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				left: 32rpx;
				top: 290rpx;
				z-index: 100;
				padding: 4rpx;
				&-bg{
					width: 100%;
					height: 20rpx;
					background: linear-gradient( 270deg, #0165FB 0%, #7AA7EB 100%);
					border-radius: 30rpx;
				}
			}
			.stepBlockFont{
				position: absolute;
				width: 678rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				top: 350rpx;
				z-index: 100;
				left: 32rpx;
				color: #fff;
			}
			&-img{
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				top: 246rpx;
				right: 32rpx;
			}
		}
		.detailBlockTop{
			position: absolute;
			width: 622rpx;
			height: 142rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			top: 440rpx;
			left: 32rpx;
			display: flex;
			align-items: center;
			padding: 32rpx;
			&-img{
				width: 188rpx;
				height: 142rpx;
				border-radius: 16rpx;
			}
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 36rpx;
				color: #222222;
				padding-left: 24rpx;
			}
			&-price{
				padding-left: 24rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				color: #E5432E;
				&-unit{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #E5432E;
				}
				&-num{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 40rpx;
					color: #E5432E;
				}
				&-font{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #222222;
				}
			}
		}
		.serviceInformationBlock{
			position: absolute;
			top: 662rpx;
			padding: 20rpx 32rpx 0px 32rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 532rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
				}
				&-valueBlock{
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #999999;
					}
					&-value{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
		.peopleBlock{
			position: absolute;
			top: 1298rpx;
			padding: 20rpx 32rpx 0px 32rpx;
			&-block{
				width: 622rpx;
				height: 196rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 32rpx;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
				}
				&-username{
					padding-top: 32rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}
				&-peopleInformation{
					padding-top: 8rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;
					&-onece{
						padding-right: 8rpx;
						border-right: 2px solid #EEEEEE;
					}
					&-twice{
						padding-left: 8rpx;
						padding-right: 8rpx;
						border-right: 2px solid #EEEEEE;
					}
					&-third{
						padding-left: 8rpx;
					}
				}
			}
		}
		.specialNeedsBlock{
			position: absolute;
			top: 1518rpx;
			padding: 20rpx 32rpx 0px 32rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 282rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
				}
				&-content{
					padding-top: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 26rpx;
					color: #333333;
				}
				&-img{
					margin-top: 32rpx;
					width: 128rpx;
					height: 128rpx;
					background: #000000;
					border-radius: 10px;
				}
			}
		}
		.orderingInformationBlock{
			position: absolute;
			top: 1908rpx;
			padding: 20rpx 32rpx 0px 32rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 252rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
				}
				&-valueBlock{
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #999999;
					}
					&-value{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
		.btnBlock{
			position: absolute;
			top: 2278rpx;
			padding: 32rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-left{
				width: 200rpx;
				height: 78rpx;
				background: rgba(1,101,251,0.1);
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #0165FB;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&-right{
				margin-left: 30rpx;
				width: 456rpx;
				height: 78rpx;
				background: #0165FB;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.popupBlock{
			width: 100%;
			height: 600rpx;
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
				padding-left: 24rpx;
				padding-top: 30rpx;
			}
			&-valueBlock{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 64rpx;
				padding-bottom: 32rpx;
				padding-left: 32rpx;
				padding-right: 32rpx;;
				border-bottom: 1px solid #EEEEEE;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}
				&-valuenum{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
				}
				&-unit{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}
			}
			&-btn{
				margin-top: 194rpx;
				width: 690rpx;
				height: 78rpx;
				background: #0165FB;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
